<!--
* @author wn
* @date 2022/11/10 11:13:09
* @description: 登录页  一级级路由
!-->
<template>
	<el-row>
		<el-col :span="8" :offset="8">
			<el-card shadow="always">
				<!-- 注册 or 登陆 -->
				<ul class="menu-tabs">
					<li :class="{ active: isLogin }" @click="handleClick(true)">登陆</li>
					<li :class="{ active: !isLogin }" @click="handleClick(false)">
						注册
					</li>
				</ul>
				<el-divider></el-divider>
				<!-- 表单部分 -->
				<el-form
					:model="loginData"
					ref="ruleForm"
					:rules="rules"
					label-position="top"
					status-icon
					size="large"
				>
					<el-form-item label="邮箱" prop="email">
						<el-input
							type="text"
							placeholder="请输入油箱"
							v-model="loginData.email"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pass">
						<el-input
							type="password"
							placeholder="请输入密码"
							v-model="loginData.pass"
							minlength="6"
							maxlength="15"
							show-password
						></el-input>
					</el-form-item>
					<el-form-item v-show="!isLogin" label="重复密码" prop="checkPass">
						<el-input
							type="password"
							placeholder="请确认密码"
							v-model="loginData.checkPass"
							minlength="6"
							maxlength="15"
							show-password
						></el-input>
					</el-form-item>
				</el-form>
				<el-form-item>
					<el-button
						type="primary"
						class="login-btn"
						size="large"
						@click="submitForm"
					>
						{{ isLogin ? '登录' : '注册' }}
					</el-button>
				</el-form-item>
			</el-card>
		</el-col>
	</el-row>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { customRules } from '@/utils/el-validate-schema'
import { ElMessage } from 'element-plus'
import { doRegister, doLogin } from '@/network/login'
import { useRouter } from 'vue-router'
import { useMd5 } from '@/hook'
// 注册 or 登陆
const isLogin = ref(true)
// 点击切换按钮
const handleClick = v => {
	isLogin.value = v
	// 重置  表单
	ruleForm.value.resetFields()
}

const ruleForm = ref('')
const loginData = reactive({
	email: '',
	pass: '',
	checkPass: '',
})

// 校验规则
const rules = customRules(isLogin, loginData)

const router = useRouter()
// 点击 登陆  或者  注册  按钮
const submitForm = () => {
	// 校验
	ruleForm.value.validate(async valid => {
		if (!valid) return ElMessage.error('请输入正确内容')
		const data = {
			email: loginData.email,
			pass: useMd5(loginData.pass),
		}
		if (isLogin.value) {
			// 登陆 [{},{}]
			const result = await doLogin(data)
			if (result.length <= 0) {
				return ElMessage({
					type: 'warning',
					message: '登录失败',
				})
			}
			// 跳转  /home
			ElMessage({
				type: 'success',
				message: '登陆成功',
			})
			router.push('/home')
		} else {
			// 注册 {email: "123@123.com", pass: "111111q", id: 1}
			const result = await doRegister(data)
			if (Object.values(result).length <= 0) {
				return ElMessage({
					type: 'warning',
					message: '网络异常',
				})
			}
			// 显示登陆
			isLogin.value = true
			ElMessage({
				type: 'success',
				message: '注册成功',
			})
		}
	})
}
</script>
<style scoped lang="scss">
.el-row {
	.el-col {
		height: 100vh;
		.el-card {
			margin: 180px 80px;
			border-radius: 15px;
			.menu-tabs {
				display: flex;
				justify-content: center;
				text-align: center;
				font-size: 18px;
				// color: #fff;
				li {
					width: 88px;
					line-height: 36px;
					border-radius: 4px;
					cursor: pointer;
					&.active {
						background-color: rgba($color: #000000, $alpha: 0.2);
					}
				}
			}
			.login-btn {
				width: 100%;
			}
		}
	}
}
</style>
